---
title: List
description: Lists are continuous, vertical indexes of text or images that are normally interactable.
docType: Demo
docGroup: Components
group: Presentation
alias: [Button]
components:
  [List, ListItem, ListItemLink, ListItemChildren, ListSubheader, Avatar]
---

# List

Lists are continuous, vertical indexes of text or images that are normally interactable.

## Simple List

A list can be created using the `List` and `ListItem` components.

```demo source="./SimpleListExample.tsx"

```

### Adding Click Handlers

Each list item will normally have an `onClick` event handler to trigger an
action.

```demo source="./AddingClickHandlersExample.tsx"

```

## Different Sizes

The `ListItem` has different heights available and defaults to automatically
determining the height based on the provided props but can be manually set as
well. Check out the following examples to see the heights in action.

```demo source="./DifferentSizesExample.tsx"

```

### Adding Secondary Text

A `ListItem` normally contains primary content (`children`) and optionally
secondary content using the `secondaryText` prop. The secondary text will gain
the `--rmd-text-secondary-color` and use trailing ellipsis for long text. When
the `secondaryText` prop exists, the `height` will be automatically set to
`"extra-large"`.

```demo source="./AddingSecondaryTextExample.tsx"

```

### Multiple Lines of Secondary Text

The `secondaryText` can also span multiple lines by enabling the `multiline`
prop. The default behavior will be to allow two lines of text and use
[-webkit-line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp)
to truncate the trailing text with ellipsis. The number of lines can be
configured by the [$SASSDOC](list-item-multiline-clamp) Sass variable or
using the [$SASSDOC](<list-set-var(item-multiline-clamp, NEW_SIZE)>) mixin.

```demo source="./MultipleLinesOfSecondaryTextExample.tsx"

```

## List Item Addons

The `ListItem` also supports rendering addons before and after the `children`,
`primaryText`, and `secondaryText` using the `leftAddon` and `rightAddon` props.
The addon will default to being icon sized and positioned vertically centered
with the rest of the content.

```demo source="./ListItemAddonsExample.tsx"

```

### Disabling Left Addon Spacing

When there is a `leftAddon`, there will normally be additional `margin-right`
applied so that the content align nicely with a hamburger menu and title in an
`AppBar`. This additional spacing can be removed by enabling
`disableLeftAddonSpacing`.

```demo source="./DisablingLeftAddonSpacingExample.tsx"

```

### Avatar Addons

When an addon should be an [Avatar](/components/avatar) instead of an icon, set
the `leftAddonType` or `rightAddonType` to `"avatar"` to modify the positioning.

```demo source="./AvatarAddonsExample.tsx"

```

### Media Addons

When an addon should be an image or something around `3.5rem` (`56px`), set the
`leftAddonType` or `rightAddonType` to `"media"`. The media size and spacing can
be configured by the [$SASSDOC](list-item-media-size) and
[$SASSDOC](list-item-media-spacing) Sass variables.

```demo source="./MediaAddonsExample.tsx"

```

### Large Media Addons

The `ListItem` also supports large media that are `6.25rem` (`100px`) wide by
setting the `leftAddonType` or `rightAddonType` to `"large-media"`. The width
of the large media can be configured by the
[$SASSDOC](list-item-media-large-size) Sass variable.

```demo source="./LargeMediaAddonsExample.tsx"

```

## Disabled List Item

The `ListItem` can be disabled by enabling the `disabled` prop which applies the
`--rmd-text-disabled-color` and prevents user interaction. Since the text color
doesn't apply to addons, the `disabledOpacity` prop can also be displayed to
apply opacity to the entire `ListItem` instead to show it has been disabled.

```demo source="./DisabledListItemExample.tsx"

```

## Noninteractive List

If the `ListItem` should be used to only display data, set the `role` to
`"presentation"` removing all interaction behavior.

```demo source="./NoninteractiveListExample.tsx"

```

### Default List Styles

The `List` and `ListItem` components remove the default `<ol>` and `<ul>`
styling, accessibility, and behavior to behave like a collection of actions
(buttons). If the default list styles should be used, replace the top-level
`<ol>` or `<ul>` with the `Typography` component instead so all items gain the
same typography.

```demo source="./DefaultListStylesExample.tsx"

```

### List Item Children

Since the `ListItem` has some nice functionality of separating content with
addons, it might be tempting to use the `ListItem` for layouts instead of
interactions. This is not recommended for accessibility because most semantics
are removed from the `List` and `ListItem` components. Instead, use the `Box`
(or a `flex` container) and `ListItemChildren` components for presentational
data.

```demo source="./ListItemChildrenExample.tsx"

```
